<template>
  <div>
    <el-card class="box-card">
      <el-row :gutter="100" style="margin-top: 30px">
        <el-col :span="8">
          <el-tree
            :data="data"
            :expand-on-click-node="false"
            default-expand-all
            node-key="id"
            show-checkbox>
              <span class="custom-tree-node" slot-scope="{ node, data }">
                <span> {{ data.nodeName }}</span>
                <span>
                  <el-button @click="() => appendZ(data)" size="mini" type="text" v-if="data.id==0">添加章</el-button>
                  <el-button @click="() => appendJ(data)" size="mini" type="text" v-if="data.chapterId==0">添加节</el-button>
                  <el-button @click="() => getNodeZ(node,data)" size="mini" type="text" v-if="data.chapterId==0">编辑</el-button>
                  <el-button @click="() => getNodeJ(node,data)" size="mini" type="text" v-if="data.chapterId!=0">编辑</el-button>
                  <el-button @click="() => remove(node, data)" size="mini" type="text" v-if="data.id!=0">删除</el-button>
                </span>
              </span>
          </el-tree>
        </el-col>
        <el-col :span="12">
          <el-card class="box-card grid-content bg-purple-light" v-if="isShow">
            <div class="clearfix" slot="header">
              <span>章信息</span>
              <el-button @click="saveMenu" style="float: right; padding: 2px 0" type="text">保存</el-button>
              <el-button @click="closeMenu" style="float: right; padding: 2px 0" type="text">关闭</el-button>
            </div>
            <el-form :model="ChapterForm" label-width="70px">
              <el-form-item label="父级章节">
                <el-input :disabled="true" size="small" v-model="parentName"></el-input>
              </el-form-item>
              <el-form-item label="章名" prop="nodeName">
                <el-input size="small" v-model="ChapterForm.nodeName"></el-input>
              </el-form-item>
              <el-upload
                class="upload-demo"
                drag
                :action="'/api/education-resouse/res/uploadFile/'"
                :show-file-list="true"
                :on-success="handleAvatarSuccess"
                multiple>
                <i class="el-icon-upload"></i>
                <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                <div class="el-upload__tip" slot="tip">上传课件</div>
              </el-upload>
              <el-form-item label="信息">
                <el-input
                  type="textarea"
                  :rows="10"
                  placeholder="请输入内容"
                  v-model="ChapterForm.remarks">
                </el-input>
              </el-form-item>
            </el-form>
          </el-card>
          <el-card class="box-card grid-content bg-purple-light" v-if="showChapter">
            <div class="clearfix" slot="header">
              <span>节信息</span>
              <el-button @click="saveRes" style="float: right; padding: 2px 0" type="text">保存</el-button>
              <el-button @click="closeMenu" style="float: right; padding: 2px 0" type="text">关闭</el-button>
            </div>
            <el-form :model="ChapterForm" label-width="70px">
              <el-form-item label="父级章节">
                <el-input :disabled="true" size="small" v-model="parentName"></el-input>
              </el-form-item>
              <el-form-item label="节点名称" prop="nodeName">
                <el-input size="small" v-model="ChapterForm.nodeName"></el-input>
              </el-form-item>
              <el-form-item label="课件类型">
                <el-select v-model="ChapterForm.nodeType" placeholder="选择类型">
                  <el-option label="视频" value="视频"></el-option>
                  <el-option label="课件" value="课件"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="上传视频" v-if="ChapterForm.nodeType==='视频'">
                  <uploader :key="uploader_key" :options="options" class="uploader-example" @file-success="onFileSuccess">
                    <uploader-unsupport></uploader-unsupport>
                    <uploader-drop>
                      <uploader-btn :single="true">选择文件</uploader-btn>
                    </uploader-drop>
                    <uploader-list></uploader-list>
                  </uploader>
              </el-form-item>
              <el-form-item label="上传课件" v-if="ChapterForm.nodeType==='课件'">
                <el-upload
                  class="upload-demo"
                  drag
                  :action="'/api/education-resouse/res/uploadFile/'"
                  :show-file-list="true"
                  :on-success="handleAvatarSuccess"
                  multiple>
                  <i class="el-icon-upload"></i>
                  <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                  <div class="el-upload__tip" slot="tip">上传课件</div>
                </el-upload>
              <el-form-item label="备注">
                <el-input
                  type="textarea"
                  :rows="10"
                  placeholder="请输入内容"
                  v-model="ChapterForm.remarks">
                </el-input>
              </el-form-item>
            </el-form>
          </el-card>
        </el-col>
      </el-row>
    </el-card>
  </div>

</template>

<script>
  export default {
    name: "Chapter",
    data() {
      return {
        data: [
          {
            id: 0,
            nodeName: '章节管理',
            children: []
          }
        ],
        uploader_key: new Date().getTime(),
        options: {
          target: '/api/education-resouse/res/slicingUpload',//SpringBoot后台接收文件夹数据的接口
          testChunks: false,//是否测试分片
          chunkSize:3*1024*1024,
        },
        isShow: false,
        showChapter:false,
        ChapterForm: {resId:null},
        type:'',
        parentName: '',
        id:'',
        res:{}
      }
    },
    methods: {
      handleAvatarSuccess(res, file) { //上传课件结束后
        this.ChapterForm.resId = res.result.id;
        this.$message.success("上传完成");
      },
      onFileSuccess: function (rootFile, file, response, chunk) {//上传视频结束后
        this.res=JSON.parse(response).result;
        this.res.size=chunk.endByte;
        //this.$message.success("上传成功");
      },
      closeMenu: function () {
        this.isShow = false;
        this.showChapter = false;
        this.ChapterForm = {};
        this.parentName="";
      },
      getTree: function () {//按照树的组件封装数据结构
        this.$http.get("education-course/chapter/getTree/"+this.id).then((res) => {
          if (res.data.success) {
            this.data[0].children = res.data.result;
          } else {
            this.$message.error(res.data.message);
          }
        });
      },
      saveRes:function(){
        this.$http.post("education-resouse/res/save",this.res).then((res) => {
          this.ChapterForm.resId=res.data.result;
          this.saveMenu();
        });
      },
      saveMenu: function () {
        this.ChapterForm.courseId=this.id;
        this.$http.post("education-course/chapter/save",this.ChapterForm).then((res) => {
          if (res.data.success) {
            this.$message({message: res.data.message, type: 'success'});
          } else {
            this.$message.error(res.data.message);
          }
          //关闭菜单框
          this.closeMenu();
          //渲染菜单树
          this.getTree();
        });
      },
      appendZ: function (data) {
        this.showChapter = false;
        this.isShow = true;
        this.parentName = data.nodeName;//设置父级菜单名称
        this.ChapterForm.chapterId = data.id; //设置父级菜单id
      },
      appendJ: function (data) {
        this.isShow = false;
        this.showChapter = true;
        this.parentName = data.nodeName;//设置父级菜单名称
        this.ChapterForm.chapterId = data.id; //设置父级菜单id
      },
      remove: function (node, data) {//删除
        if(confirm("确定删除此章节?")){
          this.$http.get("education-course/chapter/delTree/" + data.id).then((res) => {
            if (res.data.success) {
              this.$message({message: res.data.message, type: 'success'});
              this.getTree();//重新加载tree
            } else {
              this.$message.error(res.data.message);
            }
          });
        }

      },
      getNodeZ: function (node,data) {//回显
        this.isShow=true;
        this.showChapter = false;
        this.parentName=node.parent.data.nodeName;
        this.$http.get("education-course/chapter/get/" + data.id).then((res) => {//当前节
          if (res.data.success) {
            this.ChapterForm=res.data.result;
          } else {
            this.$message.error(res.data.message);
          }
        });
      },
      getNodeJ: function (node,data) {//回显
        this.showChapter=true;
        this.isShow = false;
        this.parentName=node.parent.data.nodeName;
        this.$http.get("education-course/chapter/get/" + data.id).then((res) => {//当前节
          if (res.data.success) {
            this.ChapterForm=res.data.result;
          } else {
            this.$message.error(res.data.message);
          }
        });
      }
    },
    mounted() {
      this.id = this.$route.query.id;
      this.getTree();
    }
  }
</script>

<style lang="less" scoped>
  .el-row {
    margin-bottom: 20px;

    &:last-child {
      margin-bottom: 0;
    }
  }

  .el-col {
    border-radius: 4px;
  }

  .bg-purple-dark {
    background: #99a9bf;
  }

  .bg-purple {
    background: #d3dce6;
  }

  .bg-purple-light {
    background: #e5e9f2;
  }

  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }

  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }

  .custom-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    padding-right: 8px;
  }
</style>

